import React from 'react';
import {connect} from 'dva';
import ReactDOM from 'react-dom';
import styles from './index.less';
import {
  NavBar,
  Icon,
  SegmentedControl,
  PullToRefresh,
  Button,
  Accordion,
  Picker,
  List,
  Calendar,
  Switch
} from 'antd-mobile';
import enUS from 'antd-mobile/lib/calendar/locale/en_US';

class CreatorPage extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      district: [{'label': 321, value: 3211}],
      config: {
        locale: enUS,
        type: 'one'
      },
      show: false,
      currentDateKey: '',
      values: {
        companyName: '',
        handlingSite: '',
        tan: false,
        from: '',
        to: ''
      }
    }
  }

  onChange = (value, key)=>{
    this.setState({values: {
      [key]: value
    }});
  }

  onConfirm = (time) => {
     document.getElementsByTagName('body')[0].style.overflowY = this.originbodyScrollY;
     this.setState({
       show: false,
       values: {
         [this.state.currentDateKey] : global.moment(time).format('YYYY-MM-DD')
       }
     });
   }

  onCancel = () => {
     document.getElementsByTagName('body')[0].style.overflowY = this.originbodyScrollY;
     this.setState({
       show: false,
       startTime: undefined,
       endTime: undefined,
     });
   }

   onShowDatePicker = (key) => {
     this.setState({
        show: true,
        currentDateKey: key
      });
   }

  render(){
    const now = new Date();

    return (
      <div className={styles.creator}>
        <NavBar
          mode='dark'
          icon={< Icon type = 'left' />}
          onLeftClick={() => console.log('onLeftClick')}
          rightContent={[< Icon key = '1' type = 'ellipsis' />]}>
          Travel Request System
        </NavBar>
        <div className={styles.baseInfos}>
          <div className={styles.info}>
            <div className={styles.title}>New Application</div>
            <div className={styles.list}>
              <Picker data={this.state.district} cols={1} onChange={(values) => this.onChange(values[0], 'companyName')}>
                <div className={styles.item}>
                  <div className={styles.des}>Company</div>
                  <div className={styles.value}>{this.state.values.companyName || 'Selected'}</div>
                </div>
              </Picker>
              <Picker data={this.state.district} cols={1} onChange={(values) => this.onChange(values[0], 'handlingSite')}>
                <div className={styles.item}>
                  <div className={styles.des}>Handling Site</div>
                  <div className={styles.value}>{this.state.values.companyName || 'Selected'}</div>
                </div>
              </Picker>

              <div className={styles.item}>
                <div className={styles.des}>Case No.</div>
                <div className={styles.value}></div>
              </div>
              <div className={styles.item}>
                <div className={styles.des}>Application Type</div>
                <div className={styles.value}></div>
              </div>
              <div className={styles.item}>
                <div className={styles.des}>One-way Trip</div>
                <div className={styles.value}></div>
              </div>
              <div className={styles.item}>
                <div className={styles.des}>Out-of-Country</div>
                <div className={styles.value}></div>
              </div>
              <div className={styles.item}>
                <div className={styles.des}>Status</div>
                <div className={styles.value}></div>
              </div>
            </div>
          </div>
          <div className={styles.info}>
            <div className={styles.title}>Travel Details</div>
          <div className={styles.list}>
              <Picker data={this.state.district} cols={1} onChange={(values) => this.onChange(values[0], 'from')}>
                <div className={styles.item}>
                  <div className={styles.des}>*Destinations From</div>
                  <div className={styles.value}>{this.state.values.from}</div>
                </div>
              </Picker>
              <Picker data={this.state.district} cols={1} onChange={(values) => this.onChange(values[0], 'to')}>
                <div className={styles.item}>
                  <div className={styles.des}>*Destinations To</div>
                  <div className={styles.value}>{this.state.values.to}</div>
                </div>
              </Picker>
              <div className={styles.item} onClick={() => this.onShowDatePicker('eddDate')}>
                <div className={styles.des}>*Estimated Departure Date</div>
                <div className={styles.value}>{this.state.values.eddDate}</div>
              </div>
              <div className={styles.item}>
                <div className={styles.des}>*Estimated Departure Time Zone:</div>
                <div className={styles.value}></div>
              </div>
              <div className={styles.item}>
                <div className={styles.des}>*Estimated Return Date</div>
                <div className={styles.value}></div>
              </div>
              <div className={styles.item}>
                <div className={styles.des}>*Estimated Return Time Zone</div>
                <div className={styles.value}></div>
              </div>
              <div className={styles.item}>
                <div className={styles.des}>*Requestor Remark</div>
                <div className={styles.value}></div>
              </div>
              <div className={styles.item}>
                <div className={styles.des}>*Traveller</div>
                <div className={styles.value}></div>
              </div>
            </div>
          </div>
          <div className={styles.info}>
            <div className={styles.title}>Advance Detail</div>
          <div className={styles.list}>
              <div className={styles.item}>
                <div className={styles.des}>*Travel Advance Needed</div>
                <div className={styles.value}>
                  <Switch checked={this.state.values.tan} onChange={(value) => this.onChange(value, 'tan')}></Switch>
                </div>
              </div>
              <div className={styles.item}>
                <div className={styles.des}>Advance Info</div>
                <div className={styles.value}></div>
              </div>
            </div>
          </div>
          <div className={styles.info}>
            <div className={styles.title}>Purpose Of Trip & Other Qusetions/Remark</div>
          <div className={styles.list}>
              <div className={styles.item}>
                <div className={styles.des}>*Type</div>
                <div className={styles.value}></div>
              </div>
              <div className={styles.item}>
                <div className={styles.des}>Visit Site</div>
                <div className={styles.value}></div>
              </div>
              <div className={styles.item}>
                <div className={styles.des}>*Purposes of trip</div>
                <div className={styles.value}></div>
              </div>
              <div className={styles.item}>
                <div className={styles.des}>Note</div>
              <div className={styles.value}>* For Business and Ext Training, please set proxy before applying.</div>
              </div>
            </div>
          </div>
        </div>
        <Calendar
          {...this.state.config}
          visible={this.state.show}
          onCancel={this.onCancel}
          onConfirm={this.onConfirm}
          defaultDate={now}
          minDate={new Date(+now - 5184000000)}
          maxDate={new Date(+now + 31536000000)}
        />
      </div>
    )
  }
}


CreatorPage.propTypes = {};

function mapStateToProps(state) {
  return {

  }
}
export default connect(mapStateToProps)(CreatorPage);
